<template>
	<view class="layout">
		<uni-header :leftIcon="true" :title="title"></uni-header>
		<view class="content">
			<view class="banner">
				<view class="banner-item" v-for="item in bannerInfo" @click="handleClick(item.url)" v-if="item.isShow">
					<view class="iconfont icon" :class="item.icon"></view>
					<view class="item-text">{{item.name}}</view>
				</view>
			</view>
			<classNote v-if="type == 'class'" :activeId="activeId"></classNote>
			<teachingNote v-else-if="type == 'teaching'" :activeId="activeId"></teachingNote>
			<emulateNote v-else-if="type == 'emulate'" :activeId="activeId"></emulateNote>
			<researchNote v-else-if="type == 'research'" :activeId="activeId"></researchNote>
		</view>
	</view>
</template>

<script>
	import classNote from "../home/lectureClass/note.vue"
	import emulateNote from "../home/emulate/note.vue"
	import researchNote from "../home/research/note.vue"
	import teachingNote from "../home/teaching/note.vue"
	export default {
		data() {
			return {
				deviceId: this.$store.state.user.deviceId,
				title: "",
				activeId: "",
				type: "",
				noteData: {},
				bannerInfo: [{
						name: "活动信息",
						url: "/pages/activity/activityInfo",
						icon: "icon-xinxi",
						type: ["class", "teaching", "research", "emulate"]
					},
					{
						name: "教学资料",
						url: "/pages/activity/profile",
						icon: "icon-ziliao",
						type: ["class", "emulate"]
					},
					{
						name: "主观评价",
						url: "/pages/activity/evaluate",
						icon: "icon-pingjia",
						type: ["class", "emulate"]
					},
					{
						name: "评课量表",
						url: "/pages/activity/evaluationform",
						icon: "icon-shuanglieliebiao",
						type: ["class", "emulate"]
					},
					{
						name: "活动满意度",
						url: "/pages/activity/satisfaction",
						icon: "icon-dianzan",
						type: ["class", "emulate"]
					},
					{
						name: "观看直播",
						url: "",
						icon: "icon-zhibo",
						type: ["class", "research", "emulate"]
					},
					{
						name: "查看签到",
						url: "/pages/activity/signIn",
						icon: "icon-qiandao",
						type: ["class", "research", "emulate"]
					},
				]
			}
		},
		components: {
			classNote,
			emulateNote,
			researchNote,
			teachingNote
		},
		onLoad(option) {
			this.activeId = option.id;
			this.type = option.type;
			this.title = option.type == "class" ? "常规教研" : option.type == "teaching" ? "教案抽查" : option.type == "research" ?
				"主题教研" : "观摩课"
			this.bannerInfo.forEach(item => {
				if (item.type.includes(option.type)) {
					item["isShow"] = true
				}
			})
		},
		methods: {
			addNoteClick() {
				this.$tab.navigateTo("/pages/activity/addNote?activeId=" + this.activeId)
			},
			// 用户注册
			handleClick(url) {
				if (url) {
					this.$tab.navigateTo(url + "?type=" + this.type + "&activeId=" + this.activeId)
				} else {
					this.$modal.showToast('暂无数据')
				}
			},
		}
	}
</script>

<style lang="scss">
	.layout {
		.content {
			.banner {
				display: flex;
				justify-content: flex-start;
				flex-flow: row wrap;
				background: #fff;
				padding-bottom: 10px;

				.banner-item {
					width: 25%;
					margin-top: 15px;
					text-align: center;

					.iconfont {
						font-size: 35px;
						color: #fff;
						background: #3c96f3;
						border-radius: 50%;
						padding: 10px;
					}

					.item-text {
						text-align: center;
						margin-top: 10px;
					}
				}
			}

			.contentNote {
				background: #fff;
				margin-top: 30px;

				.note-title {
					font-size: 18px;
					border-bottom: 1px solid #ddd;
					padding: 10px 15px;
					color: #2c2c2c;
				}

				.note-text {
					padding: 10px 15px;
					font-size: 14px;
					color: #999;
				}
			}

			.add-note {
				position: fixed;
				bottom: 10vh;
				right: 5vw;
			}
		}
	}
</style>
